<script setup>
import { onMounted, ref, nextTick } from "vue";
import Chart1Com from "@/components/Chart1Com.vue";
import Chart2Com from "@/components/Chart2Com.vue";

//获取随机颜色
function getRandomColor() {
    let letters = "0123456789ABCDEF";
    let color = "#";
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

const keywordList = ref([
    "宠物品种",
    "养护知识",
    "宠物医疗",
    "宠物课程",
    "宠物训练",
    "注意事项",
]);

// 随机位置
function getRandomOrder() {
    const maxLeft = 200; // 可根据实际需求调整最大左偏移量
    const maxTop = 150; // 可根据实际需求调整最大上偏移量

    return {
        left: `${Math.random() * maxLeft}px`,
        top: `${Math.random() * maxTop}px`,
    };
}

var myChart, option;

const qq = ref();

onMounted(async () => {
    await nextTick();
    myChart = echarts.init(qq.value);

    // 添加图表resize事件监听，以便在图表大小改变时调整容器高度
    myChart.on("resize", () => {
        const chartDom = qq.value;
        if (chartDom) {
            chartDom.style.height = "auto";
            const clientHeight = chartDom.clientHeight;
            const chartHeight = myChart.getHeight();
            if (clientHeight < chartHeight) {
                chartDom.style.height = chartHeight + "px";
            }
        }
    });

    option = {
        xAxis: {
            type: "category",
            data: [
                "2024/11/07",
                "2024/11/08",
                "2024/11/09",
                "2024/11/10",
                "2024/11/11",
                "2024/11/12",
                "2024/11/13",
                "2024/11/14",
                "2024/11/15",
            ],
        },
        yAxis: {
            type: "value",
        },
        series: [
            {
                data: [220, 1200, 501, 934, 1390, 130, 320, 560, 1350],
                type: "line",
                smooth: true,
            },
        ],
    };
    myChart.setOption(option);

    // 获取.word元素内的所有span元素
    const wordSpans = document.querySelectorAll(".word span");

    // 遍历每个span元素，设置随机颜色和随机位置
    wordSpans.forEach((span) => {
        // 设置随机颜色
        span.style.color = getRandomColor();

        // 设置随机位置（在一定范围内随机）
        const maxLeft = 200; // 可根据实际需求调整最大左偏移量
        const maxTop = 150; // 可根据实际需求调整最大上偏移量
        span.style.position = "absolute";
        span.style.left = `${Math.random() * maxLeft}px`;
        span.style.top = `${Math.random() * maxTop}px`;
    });
});
</script>

<template>
    <main>
        <div class="one">
            <div class="blue"></div>
            <span>数据概况</span>
        </div>
        <div class="two mtop">
            <div>
                <span class="left">
                    <img src="../assets/img/cat.png" />
                </span>
                <section class="right">
                    <span>猫品种</span>
                    <span>126</span>
                </section>
            </div>
            <div>
                <span class="left">
                    <img src="../assets/img/dog.png" />
                </span>
                <section class="right">
                    <span>犬品种</span>
                    <span>136</span>
                </section>
            </div>
            <div>
                <span class="left">
                    <img src="../assets/img/book.png" />
                </span>
                <section class="right">
                    <span>知识文章</span>
                    <span>214</span>
                </section>
            </div>
            <div>
                <span class="left">
                    <img src="../assets/img/visit.png" />
                </span>
                <section class="right">
                    <span>累计访问</span>
                    <span>18702</span>
                </section>
            </div>
            <div>
                <span class="left">
                    <img src="../assets/img/user.png" />
                </span>
                <section class="right">
                    <span>注册用户</span>
                    <span>1817</span>
                </section>
            </div>
            <div>
                <span class="left">
                    <img src="../assets/img/collect.png" />
                </span>
                <section class="right">
                    <span>收藏文章</span>
                    <span>187</span>
                </section>
            </div>
        </div>
        <!-- 分类 -->
        <div class="one mtop">
            <div class="blue"></div>
            <span>用户概况</span>
        </div>
        <!-- 折线图 -->
        <div class="three mtop">
            <div ref="qq"></div>
        </div>
        <!-- 饼状图 -->
        <div class="four mtop">
            <div class="chartOne">
                <div class="top">
                    <div class="blue"></div>
                    <span>用户性别占比</span>
                </div>
                <div class="bottom">
                    <div class="left1">
                        <Chart1Com />
                    </div>
                </div>
            </div>
            <div class="chartTwo">
                <div class="top">
                    <div class="blue"></div>
                    <span>宠物品种占比</span>
                </div>
                <div class="bottom">
                    <div class="left1">
                        <Chart2Com />
                    </div>
                </div>
            </div>
            <div class="chartThree">
                <div class="top">
                    <div class="blue"></div>
                    <span>热门搜索关键词</span>
                </div>
                <div class="bottom">
                    <div class="word">
                        <span
                            v-for="(keyword, index) in keywordList"
                            :key="index"
                            :style="{
                                color: getRandomColor(),
                                ...getRandomOrder(),
                            }"
                            >{{ keyword }}</span
                        >
                    </div>
                </div>
            </div>
        </div>
    </main>
</template>

<style scoped lang="scss">
* {
    box-sizing: border-box;
}
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
main {
    height: 100%;
    width: 100%;
    /* background-color: aquamarine; */

    .mtop {
        margin-top: 10px;
    }
}
.blue {
    height: 100%;
    width: 20px;
    background-color: #199ed8;
    display: inline-block;
}
.one {
    height: 40px;
    width: 100%;
    background-color: aliceblue;
    display: flex;
    align-items: center;

    span {
        margin-left: 10px;
        bottom: 0px;
        left: 30px;
        font-size: 20px;
    }
}
.two {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.two div {
    width: 180px;
    height: 80px;
    border: 1px solid #199ed8;
    display: flex;
    cursor: pointer;
}
.left {
    display: inline-block;
    width: 50%;
    height: 100%;
    /* background-color: red; */

    img {
        padding: 10px;
        height: 100%;
        width: 100%;
    }
}
.right {
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.three {
    width: 100%;
    height: 300px;
    /* background-color: blue; */
    border-bottom: 1px solid #ccc;

    div {
        width: 100%;
        height: 100%;
    }
}
.four {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: space-between;

    .chartOne,
    .chartTwo {
        width: 35%;
        min-width: 300px; /* 设置最小宽度以保持布局 */
    }
    .chartThree {
        width: 30%;
        .bottom {
            position: relative;

            span {
                cursor: pointer;
                position: absolute;
                padding: 5px;
                margin: 2px;
                font-size: 20px;
                font-weight: bold;
            }
        }
    }

    .top {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        background-color: aliceblue;

        .blue {
            width: 20px;
            height: 100%;
            background-color: #199ed8;
        }

        span {
            font-size: 20px;
            margin-left: 10px;
        }
    }

    .bottom {
        display: flex;
        height: 100%; /* 确保填满父容器 */
        align-items: stretch;

        .left1 {
            display: flex;
            flex-direction: column;
        }

        .left1 {
            /* 将内容用内部div包裹，以实现内边距效果 */
            & > .content {
                padding: 10px;
            }
            flex: 1;
        }
    }
}
</style>
